<template>
	<view class="">
		<view class="top-menu" :style="{top:`calc(44px + ${systemBarHeight})`}">
			<van-dropdown-menu active-color="#1989fa" :close-on-click-outside="false">
				<van-dropdown-item title="查询" id="item">
					<van-cell title="创建日期" is-link>
						<view class="flex align-center justify-end">
							<view class="" @click.stop="startDateShow = true">
								<text v-if="queryParams.startDate" class="text-black">{{queryParams.startDate}}</text>
								<text v-else class="text-gray">开始日期</text>
							</view>
							<view class="padding-lr-sm">
								-
							</view>
							<view class="" @click.stop="handleEndDateShow">
								<text v-if="queryParams.endDate" class="text-black">{{queryParams.endDate}}</text>
								<text v-else class="text-gray">结束日期</text>
							</view>
						</view>
					</van-cell>
					<!-- <van-cell title="结束日期" :value="queryParams.endDate || '-'" @click="handleEndDateShow" is-link
						clickable></van-cell> -->
					<slot name="search"></slot>
					<view class="flex justify-around padding">
						<van-button class='basis-sm' plain hairline type="info" @click="handleReset">重 置</van-button>
						<van-button class='basis-sm' type="primary" @click="handleSearch">
							搜 索
						</van-button>
					</view>
				</van-dropdown-item>
				<van-dropdown-item v-model="queryParams.sort" :options="sortOption" @change="handleSortChange" />
			</van-dropdown-menu>
		</view>
		<view style="height:48px">

		</view>
		<u-datetime-picker ref="startDatetimePicker" :show="startDateShow" :value="queryParams.startDate" mode="date"
			:formatter="formatter" title="选择开始日期" @change="handleStartDateChange" @confirm="handleStartDateConfirm"
			@close="startDateShow = false" closeOnClickOverlay :minDate="minDate"
			:maxDate="maxStartDate"></u-datetime-picker>
		<u-datetime-picker ref="endDatetimePicker" :show="endDateShow" :value="queryParams.endDate" mode="date"
			:formatter="formatter" title="选择结束日期" @change="handleEndDateChange" @confirm="handleEndDateConfirm"
			@close="endDateShow = false" closeOnClickOverlay :minDate="minEndDate"
			:maxDate="maxDate"></u-datetime-picker>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		props: {
			sortOption: {
				type: Array,
				default: () => {
					return [{
						text: '日期排序',
						value: 'createTime',
						rule: 'date'
					}]
				}
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				sortList: [{
					text: '默认排序',
					value: 'default',
					rule: 'default'
				}],
				systemBarHeight: getApp().globalData.systemBarHeight || 0,
				minDate: dayjs('2024-01-01').valueOf(),
				minEndDate: dayjs('2024-01-01').valueOf(),
				maxStartDate: dayjs().valueOf(),
				maxDate: dayjs().valueOf(),
				startDateShow: false,
				endDateShow: false,
				queryParams: {
					sort: '',
					startDate: '',
					endDate: dayjs().format('YYYY-MM-DD')
				},
			};
		},
		watch: {
			sortOption: {
				immediate: true,
				deep: true,
				handler() {
					// this.sortList = this.sortList.concat(this.sortOption)
					this.queryParams.sort = this.sortOption[0]['value']
				}
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.startDatetimePicker.setFormatter(this.formatter)
			this.$refs.endDatetimePicker.setFormatter(this.formatter)
		},
		methods: {
			handleSortChange(val) {
				let findResult = this.sortOption.find(item => item.value === val)
				let rule = findResult.rule
				// let sortList = this.list.slice(0,-1)
				let sortList = this.list
				sortList.sort((a, b) => {
					if (rule === 'date') {
						return dayjs(b[findResult.value]).valueOf() - dayjs(a[findResult.value]).valueOf()
					}
					if (rule === 'default') return 0
					if (Array.isArray(rule) && rule.length) {
						return rule.indexOf(a[findResult.value]) - rule.indexOf(b[findResult.value])
					}
					return a[findResult.value] - b[findResult.value]
				})
				this.$emit('sort', sortList)
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			handleEndDateShow() {
				if (this.queryParams.startDate) {
					this.endDateShow = true
				} else {
					this.$modal.msg('请先选择开始日期')
				}
			},
			handleStartDateConfirm(date) {
				this.queryParams.startDate = dayjs(date.value).format("YYYY-MM-DD")
				this.minEndDate = date.value
				this.startDateShow = false
			},
			handleStartDateChange(date) {
				this.minEndDate = date.value
				this.queryParams.startDate = dayjs(date.value).format("YYYY-MM-DD")
			},
			handleEndDateConfirm(date) {
				this.maxStartDate = date.value
				this.queryParams.endDate = dayjs(date.value).format("YYYY-MM-DD")
				this.endDateShow = false
			},
			handleEndDateChange(date) {
				this.maxStartDate = date.value
				this.queryParams.endDate = dayjs(date.value).format("YYYY-MM-DD")
			},

			handleReset() {
				this.queryParams.startDate = undefined
				this.queryParams.endDate = undefined
				this.$emit('reset', this.queryParams)
				this.selectComponent('#item').toggle();
			},
			handleSearch() {
				this.$emit('search', this.queryParams)
				this.selectComponent('#item').toggle();
			}
		}
	}
</script>


<style scoped lang="scss">
	.top-menu {
		width: 100%;
		height: 48px;
		position: fixed;
		left: 0;
		z-index: 999;
	}

	::v-deep .van-dropdown-menu__bar {
		box-shadow: 0 5px 5px rgba(100, 101, 102, 0.12);

	}

	::v-deep .van-cell__title {
		flex: none;
		flex-shrink: 0;
	}

	::v-deep .van-cell__value {
		width: 100%;
	}
</style>